Dépendance Javacript :

src/app/assets/scripts/local/NotificationsCenter.js

Init

La liste de notification a besoin du script suivant pour fonctionner :

    const notification = new NotificationsCenter('.js-notification');
    notification.init();

Il faut donc que ce dernier soit ajouté en global dans l'application.

Il fonctionne de paire avec les notifications il suffit d'avoir une instance de Class pour les deux

Utilisation

Contenu

Pour la gestion du contenu de la snackbar il faut mettre à jour son contenu soit via le html au chargement de la page. Soit par javascript (exemple ci-dessous).

    const snackbarHolder = document.querySelector('.js-snackbar');
    if (snackbarHolder) {
        snackbarHolder.innerHTML = 'mon nouveau html';
    }

Apparition

La gestion de la visibilité de la snackbar se fait via un événement custom en javascript. Ce dernier prend un deuxième paramètre qui est de type object et qui contient la durée (en ms) d'affichage de la snackbar.

Exemple affichage de la snackbar pour une durée illimité :

    document.dispatchEvent(new CustomEvent('SHOW_SNACKBAR'))

Exemple affichage de la snackbar pour une durée de 5 sec :

    document.dispatchEvent(new CustomEvent('SHOW_SNACKBAR', {detail: { delay: 5000 }}))

Ce code javascript est à exécuter au sein d'autre fichier javacript lorsqu'il y a besoin d'afficher la snackbar. Comme on passe par un système d'événement il est accessible en global. Attention à ce que le script en dépendance soit bien initialiser avant cependant.